<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <button>点击</button>
    <script>
      /*
      本案例需求:  给每个按钮注册一个点击事件，点击之后当前元素就会边红色(无需排他)
      (1)请找出下列代码产生的bug
          如何找出来的?
          原因分析:
      (2)如果想要实现正确的需求,应该如何实现
    */
      const btns = document.querySelectorAll("button")
      for (let i = 0; i < btns.length; i++) {
        const btns1 = btns[i]
        btns1.addEventListener("click", function () {
          this.style.backgroundColor = "red"
        })
      }
    </script>
  </body>
</html>
